<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.6/lib/theme-chalk/index.css">
</head>
<body>
<div id="app" class="login">
    <el-form ref="loginForm" :model="loginForm" class="login-form">
        <h3 class="title">管理系统</h3>
        <el-form-item prop="username">
            <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">

            </el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input
                    v-model="loginForm.password"
                    type="password"
                    auto-complete="off"
                    placeholder="密码"
                    @keyup.enter.native="handleLogin"
            >
            </el-input>
        </el-form-item>
        <el-form-item>
            <span style="margin-left: 20px;margin-right:20px">所属科室</span>
            <el-select v-model="loginForm.dept" placeholder="请选择">
                <el-option
                        v-for="item in depts"
                        :key="item.id"
                        :label="item.text"
                        :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>
        <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
        <el-form-item >
            <el-button
                    :loading="loading"
                    size="medium"
                    type="primary"
                    style="width:100%;"
                    @click.native.prevent="handleLogin"
            >
                <span v-if="!loading">登 录</span>
                <span v-else>登 录 中...</span>
            </el-button>
        </el-form-item>
    </el-form>
    <!--  底部  -->
    <div class="el-login-footer">
        <span>Copyright © 2020-2021 yegs All Rights Reserved.</span>
    </div>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui@2.15.6/lib/index.js"></script>
<script src="https://unpkg.com/axios@0.25.0/dist/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        created(){

        },
        mounted(){
            //this.timer = setInterval(this.fleshList, 1000);
        },
        beforeDestroy() {
            clearInterval(this.timer);
        },
        data() {
            return {
                loading:false,
                loginForm:{},
                jobs: [],
                search: '',
                FormData:{},
                showForm:false,
                timer:'',
                depts:[
                    {id:'内一科',text:'内一科'},
                    {id:'内二科',text:'内二科'},
                    {id:'内三科',text:'内三科'},
                    {id:'内四科',text:'内四科'},
                    {id:'内五科',text:'内五科'},
                    {id:'内六科',text:'内六科'},
                    {id:'血透室',text:'血透室'},
                    {id:'脑病综合科',text:'脑病综合科'},
                    {id:'老年病科',text:'老年病科'},
                    {id:'针灸推拿康复科',text:'针灸推拿康复科'},
                    {id:'肿瘤综合科',text:'肿瘤综合科'},
                    {id:'外一科',text:'外一科'},
                    {id:'外二科',text:'外二科'},
                    {id:'外三科',text:'外三科'},
                    {id:'肛肠科',text:'肛肠科'},
                    {id:'妇  科',text:'妇  科'},
                    {id:'五官科',text:'五官科'},
                    {id:'麻醉科/手术室',text:'麻醉科/手术室'},
                    {id:'ICU',text:'ICU'},
                    {id:'骨一科',text:'骨一科'},
                    {id:'骨二科',text:'骨二科'},
                    {id:'骨三科',text:'骨三科'},
                ]
            }
        },
        methods: {
            handleLogin() {
                let there = this;
                axios({
                    method: 'post',
                    url: 'api/user/login',
                    data:this.loginForm,
                }).then(function (res) {
                    if(res.data.code == 200){
                        window.location.href='index.html?id='+there.loginForm.dept
                    }else{
                        there.loginForm = {}
                        there.$message({
                            message: '账号密码错误!',
                            type: 'error'
                        });
                    }
                }).catch(function (err) {
                    console.log(err);
                });
            },
        },
    })
</script>
<style type="text/css">
    .login{
        margin-top: 10%;
        margin-left: 35%;
        margin-right: 35%;
    }
</style>
</html>
